<template>
    <div class="BusinessCenter">

        <div class="businessCenter_wrap">
            <div id="divData" style="width: 100%; height: auto; text-align: left; vertical-align: top;">
                <input type="hidden" value="promotionsLeftMenu" id="activeLeftMenu">
                <div class="content_right_swap" style="display: block;">
                    <div class="content_right_title">自有商家合作中心</div>
                    <div class="invitedInfoWrap">
                        <div class="invitedPerson fl">
                            <span>合作商家数:</span>
                            <span id="cphServerData_labBeInvitedPersons">{{list.length}}</span>
                        </div>
                        <div style="height: 40px; line-height: 40px; float: left; font-size: 18px;">|</div>
                        <div class="achieveRewardwrap fr">
                            <span>获得分成:</span>
                            <span id="cphServerData_labAchieveReward">{{(ztc).toFixed(2)}}元</span>
                        </div>
                    </div>
                    <!-- <div class="promotionBanner"></div>-->
                    <div class="kindlyReminderblock">
                        <h2>温馨提示:</h2>
                        <p>1. 通过下方邀请码或邀请链接，邀请商家加入并发布活动后，每当完成一笔任务，您都可以获得该笔任务佣金差价的
                            <span>80%</span>利润分成。<br/>(例如：自有商家客单价为240的宝贝，对外价格为25，自有成本为13，那么可获得（25-13）*0.8=9.6的利润。)</p>
                        <p style="color: red">2. 本活动不设返利上限，长期有效</p>
                        <p style="color: red">3. 不同区间的成本价明细
                        </p>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="money" label="价格区间">
                            </el-table-column>
                            <el-table-column prop="cmoney" label="成本价">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <span style="margin-right: 10px;">复制链接发送邀请给好友</span>
                        <input name="ctl00$cphServerData$txtInviterLink" type="text"
                               :value="currentUrl+'?k='+urlList[2]['key']"
                               :data-clipboard-text="urlList[2]['key']?currentUrl+'?k='+ urlList[2]['key']:'待生成'"
                               @click="copy('tag-read3')" class="tag-read3 link" readonly="readonly"
                               id="cphServerDatatxtInviterLink" style="border-style:None;width: 430px">
                        <el-button :data-clipboard-text="urlList[2]['key']?currentUrl+'?k='+ urlList[2]['key']:'待生成'"
                                   @click="copy('tag-read3')" class="tag-read3" size="mini">复制
                        </el-button>

                    </div>
                    <el-form :inline="true">
                        <el-form-item label="快递费">
                            <el-input placeholder="请输入内容" size="mini" v-model="xswl">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="setxswl" size="mini">
                                设置
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>


        </div>
        <br/>

        <div>
            <div style="text-align: center;padding: 20px 0 0 0;">
                <h3>商家邀请列表</h3>
            </div>
            <el-table :data="list" style="width: 100%;padding-top: 35px" header-row-class-name="c">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table :data="tableData4" max-height="460" style="width: 100%">
                            <el-table-column label="店铺多多号" prop="taobao" width="90">
                            </el-table-column>
                            <el-table-column label="代码注入状态" prop="status" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="active" v-if="scope.row.status == 0">
                                        待激活
                                    </el-button>
                                    <el-button size="mini" type="primary" v-if="scope.row.status == 1">已激活
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="防降权代码注入时间" prop="addTime" width="150">
                            </el-table-column>
                            <el-table-column label="防降权代码结束时间" prop="" width="150">
                            </el-table-column>
                            <el-table-column label="续费防降权代码时间" prop="" width="150">
                            </el-table-column>
                            <el-table-column label="续费一年防降权代码时间" prop="" width="175">
                            </el-table-column>
                            <el-table-column label="续费永久防降权代码时间" prop="" width="175">
                            </el-table-column>
                            <!--<el-table-column fixed="right" label="" width="100">
                                                            <template slot-scope="scope">
                                                                <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" size="small"
                                                                           type="text">
                                                                    移除
                                                                </el-button>
                                                            </template>
                                                        </el-table-column>-->
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="user" label="用户名" width="120">
                </el-table-column>
                <el-table-column prop="qq" label="QQ" width="160">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="110">
                    <template slot-scope="scope">
                        <template v-if="scope.row.type =='0'">
                            合作商
                        </template>
                        <template v-if="scope.row.type =='1'">
                            代理商
                        </template>
                        <template v-if="scope.row.type =='2'">
                            商家
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="addTime" label="注册时间" width="160">
                    <template slot-scope="scope">
                        {{scope.row.addTime}}
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="余额" width="100">
                </el-table-column>
                <el-table-column prop="" label="今日消费" width="100">
                </el-table-column>
                <el-table-column prop="" label="昨日消费" width="100">
                    <template slot-scope="scope">
                        {{userArr[scope.row.user]?userArr[scope.row.user].okComMoney+userArr[scope.row.user].okMoney:0}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="本金" width="100">
                    <template slot-scope="scope">
                        {{userArr[scope.row.user]?userArr[scope.row.user].okMoney:0}}
                    </template>
                </el-table-column>
                <el-table-column prop="okComMoney" label="佣金" width="100">
                    <template slot-scope="scope">
                        {{userArr[scope.row.user]?userArr[scope.row.user].okComMoney:0}}
                    </template>
                </el-table-column>
                <el-table-column prop="okMoney" label="提成" width="100">
                    <template slot-scope="scope">
                        {{ moneyz[scope.row.user]?(moneyz[scope.row.user].tc).toFixed(2):0}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="总消费" width="100">
                    <template slot-scope="scope">
                        {{moneyz[scope.row.user]?moneyz[scope.row.user].okComMoney+moneyz[scope.row.user].okMoney:0}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="今日完成单数" width="110">
                </el-table-column>
                <el-table-column prop="" label="昨日完成单数" width="110">
                    <template slot-scope="scope">
                        {{userArr[scope.row.user]?userArr[scope.row.user].okNum:0}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="总完成单数" width="110">
                    <template slot-scope="scope">
                        {{moneyz[scope.row.user]?moneyz[scope.row.user].okNum:0}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="110">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" v-if="scope.row.status =='0'"
                                   @click=" setMoney(1,scope.row)">待审核
                        </el-button>
                        <el-button size="mini" type="primary" v-else @click="setArr(0,scope.row.id)">审核通过
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="设置价格" width="110">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click=" setMoney(1,scope.row)">设置价格
                        </el-button>

                    </template>
                </el-table-column>

            </el-table>
            <br/>
            <el-pagination :page-size="20" :current-page="searchList.pn" layout="prev, pager, next"
                           :total="searchList.total" @current-change="getCooperationList" v-if="searchList.total > 20">
            </el-pagination>
            <el-dialog title="设置佣金" :visible.sync="dialogMoney" custom-class="dialogMoney">
                <template>
                    <el-form>
                        <el-form-item label="">

                            <el-radio label="默认模式" v-model="model" @change="modelChange">
                                默认模式
                            </el-radio>
                            （价格固定为成本价加1元,提成固定为1元）

                        </el-form-item>
                        <el-form-item label="">
                            <el-radio label="55分成模式" v-model="model" @change="modelChange">
                                55分成模式
                            </el-radio>
                            （自定义价格,不能低于成本价+1元,提成为(价格-成本价)/2）
                        </el-form-item>
                    </el-form>

                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column label="商品价格=$" prop="money" width="110">
                        </el-table-column>
                        <el-table-column label="成本价" prop="cost" width="70">
                        </el-table-column>

                        <el-table-column label="自定义价格" prop="price" width="90">
                            <template slot-scope="scope">
                                <el-input size="small" v-model="commission[scope.$index]">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="利润" prop="price" width="90">
                            <template slot-scope="scope">
                                {{((commission[scope.$index] -scope.row.cost) * 0.8).toFixed(2)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="padding-top: 15px;text-align: center">
                        <el-button @click="upCommission()" type="primary">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import Clipboard from "clipboard";

    export default {
        data() {
            return {
                xswl: "",
                tableData4: [],
                model: "默认模式",
                userId: "",
                users: [],
                ztc: 0,
                userArr: [], //自定义数据
                user: "",
                tableData: [
                    {
                        money: "$<100",
                        cost: "9",
                        cmoney: 0
                    },
                    {
                        money: "101$<150",
                        cost: "11",
                        cmoney: 0
                    },
                    {
                        money: "151≤$<250",
                        cost: "12",
                        cmoney: 0
                    },
                    {
                        money: "251≤$<350",
                        cost: "14",
                        cmoney: 0
                    },
                    {
                        money: "351≤$<450",
                        cost: "17",
                        cmoney: 0
                    },
                    {
                        money: "451≤$<500",
                        cost: "19",
                        cmoney: 0
                    },
                    {
                        money: "501≤$<800",
                        cost: "23",
                        cmoney: 0
                    },
                    {
                        money: "801≤$<1000",
                        cost: "26",
                        cmoney: 0
                    }
                ],
                dialogMoney: false,
                searchList: {
                    search: "user",
                    searchValue: "",
                    filter: {
                        status: ""
                    },
                    pn: 1,
                    total: 0
                },
                url: "",
                urlList: [],
                list: [],
                commission: [10, 12, 13, 15, 18, 20, 24, 27],
                money: 1000,
                currentUrl: "",
                currentMoney: []
            };
        },
        methods: {
            setxswl() {
                let _this = this;
                if (_this.xswl < 1) {
                    _this.$message({
                        type: "error",
                        message: "不能低于1"
                    });
                    return
                }
                _this.$http
                    .post("/api/api.php", {
                        id: "setxswl",
                        money: _this.xswl
                    })
                    .then(function (response) {
                        _this.$message({
                            type: "success",
                            message: "成功"
                        });
                    });
            },
            getPrice() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getPrice"
                    })
                    .then(function (response) {
                        let result = response.data.data;
                        console.log(response.data.xswl)
                        _this.xswl = response.data.xswl;
                        _this.currentMoney = result;
                        console.log(_this.currentMoney);
                        for (let i = 0; i < _this.currentMoney.length; i++) {
                            _this.tableData[i].cmoney = _this.currentMoney[i];
                        }
                        console.log(_this.tableData);
                        let k = 0;
                        for (let i in _this.tableData) {
                            _this.tableData[i].cost = response.data.data[k];
                            _this.commission[k] =
                                response.data.data[k] + response.data.data[k] * 0.2;
                            k++;
                        }
                    });
            },
            goto(a) {
                window.open(a);
            },
            modelChange(a) {
                let commissionTemp = [];
                if (a === "55分成模式") {
                    for (let i in this.commission) {
                        commissionTemp[i] =
                            this.tableData[i].cost * 1 + this.tableData[i].cost * 0.2;
                    }
                } else {
                    for (let i in this.commission) {
                        commissionTemp[i] =
                            this.tableData[i].cost * 1 + this.tableData[i].cost * 0.2;
                    }
                }
                this.commission = commissionTemp;
            },
            upCommission() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "upCommission",
                        data: JSON.stringify(_this.commission),
                        money: _this.money,
                        user: _this.user
                    })
                    .then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getLinkList();
                        if (response.data.status === "success") {
                            _this.setArr(1, _this.userId);

                            _this.dialogMoney = false;
                        }
                    });
            },
            setMoney(a, b) {
                this.dialogMoney = true;
                this.user = b.user;
                this.userId = b.id;
            },
            getCooperationList(page) {
                if (page) {
                    this.searchList.pn = page;
                }
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getCooperationList2",
                        search: JSON.stringify(_this.searchList),
                        type: 2
                    })
                    .then(function (response) {
                        if (response.data.status === "success") {
                            _this.list = response.data.data;
                            _this.userArr = response.data.users;
                            _this.moneyz = response.data.usersz;
                            _this.searchList.total = parseInt(response.data.total);
                            for (let i in _this.moneyz) {
                                _this.ztc += _this.moneyz[i].tc;
                            }
                        }
                    });
            },
            setArr(a, b) {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "setCooperationStatus",
                        status: a,
                        cooperationId: b
                    })
                    .then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getCooperationList();
                    });
            },
            copy(a) {
                let _this = this;
                let clipboard = new Clipboard("." + a);
                clipboard.on("success", e => {
                    console.log("复制成功");
                    _this.$message({
                        type: "success",
                        message: "复制成功"
                    });
                    clipboard.destroy();
                });
                clipboard.on("error", e => {
                    _this.$message({
                        type: "error",
                        message: "复制失败，请手动复制"
                    });
                    console.log("该浏览器不支持自动复制");
                    clipboard.destroy();
                });
            },
            addLink(a) {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "addLink",
                        type: a
                    })
                    .then(function (response) {
                        _this.getLinkList();
                    });
            },
            getLinkList() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getLink"
                    })
                    .then(function (response) {
                        _this.urlList = response.data.data;
                        // console.log(_this.urlList);
                        /*else {_this.url = '未生成';}*/
                    });
            }
        },
        mounted() {
            let _this = this;
            _this.getLinkList();
            _this.getCooperationList();
            _this.getPrice();
            this.currentUrl = window.location.host;
        }
    };
</script>
<style lang="scss">
    .BusinessCenter {
        .businessCenter_wrap {
            margin: 0 auto;
            background: #f6f6f6;
            width: 770px;
            padding: 15px;
        }

        .dialogMoney {
            width: 400px;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both;
        }

        .box-card {
            width: 480px;
        }

        .demo-table-expand {
            font-size: 0;
            margin-left: 50px;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 100%;
        }

        /*清除浮动*/
        .clearfix:after {
            content: "020";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            zoom: 1;
        }

        .clear {
            clear: both;
        }

        /*公共class 浮动*/
        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        /*headerTop 顶部样式*/
        .headerTop {
            width: 1000px;
            margin: 0 auto;
            height: 50px;
            line-height: 50px;
        }

        .headerTopSwap {
            float: right;
        }

        .headerTop_part {
            float: left;
            margin-left: 10px;
        }

        .headerTop_Mobile span {
            color: #757575;
            border-right: 2px solid #8c8c8c;
            padding-right: 10px;
        }

        .btnRechargeTurn {
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
        }

        .btnQuit {
            border: none;
            background: none;
            border-left: 2px solid #8c8c8c;
            padding: 0;
            padding-left: 10px;
            margin-left: -40px;
            cursor: pointer;
            height: 21px;
        }

        /*header 菜单样式*/
        .menu {
            float: right;
            font-size: 18px;
            width: 80%;
            text-align: right;
            color: #696969;
        }

        .menu span {
            width: 20%;
            display: inline-block;
        }

        .menu span a {
            color: #696969;
            text-decoration: none;
            line-height: 85px;
            display: inline-block;
        }

        .menu span a:hover {
            color: #fd394f;
        }

        .header {
            background: #f6f6f6;
            height: 85px;
            width: 1000px;
            margin: 0 auto;
        }

        .header img {
            height: 75px;
            margin-top: 5px;
            float: left;
        }

        /*左侧菜单样式*/
        .menu_nav {
            width: 220px;
            background: #f6f6f6;
            float: left;
        }

        .menu_nav ul a {
            color: #696969;
            text-decoration: none;
            margin-left: 20px;
            font-size: 18px;
            display: inline-block;
            width: 120px;
            cursor: pointer;
        }

        .menu_nav ul a:hover {
            color: #fd3950;
        }

        .menu_nav ul li {
            height: 60px;
            line-height: 60px;
            padding: 0 20px;
        }

        .menu_nav ul li i {
            height: 26px;
            width: 26px;
            display: inline-block;
            position: relative;
            top: 8px;
        }

        /*右侧内容样式*/
        .content_right_swap {
            width: 95%;
            height: auto;
            margin: 0 auto;
        }

        .content_right_title {
            margin: 20px 0;
            padding-bottom: 20px;
            font-size: 20px;
            font-weight: 600;
            color: #707070;
            border-bottom: 1px solid #a7a7a7;
        }

        /*右侧样式（商家中心部分）*/
        .business_info {
            position: relative;
        }

        .yellow_hr {
            width: 722px;
            margin: 0px auto;
            padding: 0px;
            overflow: hidden;
            height: 2px;
            background: #f8b551;
            position: absolute;
            top: 38px;
            left: 3px;
        }

        .business_info_nickname_wrap {
            color: #000;
            font-weight: 500;
            font-size: 16px;
            margin: 20px;
        }

        .business_info_nickname {
            margin-top: 20px;
            border-bottom: 1px dotted #b5b5b5;
            padding-bottom: 10px;
        }

        .business_info_nickname_text span:first-child {
            width: 105px;
            display: inline-block;
            letter-spacing: 6.5px;
        }

        .business_editnickname {
            text-decoration: underline;
            background: none;
            border: none;
            color: #fd394f;
            font-size: 16px;
            cursor: pointer;
        }

        .baseInfo,
        .business_info_commission_warp {
            margin-top: 10px;
            border-bottom: 1px dotted #b5b5b5;
            padding-bottom: 10px;
        }

        .business_info_mobile_text,
        .business_info_balance_text,
        .business_info_freezing_text {
            width: 103px;
            display: inline-block;
            letter-spacing: 4.5px;
        }

        .business_info_commission_text {
            width: 105px;
            display: inline-block;
        }

        .business_info_commission_warp input {
            font-size: 16px;
            border: none;
            background: none;
            text-decoration: underline;
            color: #fd394f;
            cursor: pointer;
        }

        .blue_hr {
            width: 722px;
            margin: 0px auto;
            padding: 0px;
            overflow: hidden;
            height: 2px;
            background: #00a0e9;
            margin-bottom: 20px;
            position: absolute;
            top: 38px;
            left: 3px;
        }

        .modifyPassword_input {
            background: #fff;
            margin-bottom: 10px;
            border-radius: 3px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
        }

        .modifyPassword_input span {
            margin: 0px 10px 0 20px;
            font-size: 16px;
            color: #707070;
            font-weight: 500;
        }

        .modifyPassword_input input {
            border: none;
            height: 21px;
            font-size: 16px;
            width: 80%;
        }

        .dotted_hr {
            width: 100%;
            height: 1px;
            border-bottom: 1px dotted #b5b5b5;
            margin: 15px 0;
        }

        .btn_wrap {
            width: 40%;
            margin: 0 auto;
            margin-bottom: 30px;
        }

        .btn_wrap input {
            width: 100px;
            height: 35px;
            background: #00a0e9;
            border: 1px solid #00a0e9;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }

        /*商家公告*/
        .business_info_Notice_wrap {
            min-height: 270px;
            margin-bottom: 20px;
            position: relative;
        }

        .business_info_Notice_title {
            // background: url("../../assets/promotionBanner.png") no-repeat center center;
            width: 205px;
            height: 40px;
            margin-top: 30px;
        }

        .red_hr {
            width: 722px;
            margin: 0px auto;
            padding: 0px;
            overflow: hidden;
            height: 2px;
            background: #fd394f;
            position: absolute;
            top: 38px;
            left: 3px;
        }

        .noticeTitle {
            margin: 20px;
            font-size: 18px;
        }

        .noticeContent {
            width: 90%;
            margin: 0 auto;
            text-align: left;
            text-indent: 16px;
            line-height: 18px;
        }

        .noticeImg {
            margin: 20px;
            max-width: 720px;
        }

        .noticeCreatTime {
            text-align: right;
            font-weight: 500;
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 10px;
            color: #a0a0a0;
        }

        .noticeH1 {
            font-size: 24px;
            color: #7d7d7d;
            margin-top: 100px;
        }

        .invitedInfoWrap {
            background: #fd394f;
            border: 1px solid #fd394f;
            border-radius: 5px;
            height: 40px;
            color: #fff;
            margin-bottom: 20px;
        }

        .invitedPerson,
        .achieveRewardwrap {
            line-height: 40px;
            width: 49%;
            text-align: center;
            font-size: 18px;
        }

        .promotionBanner {
            background: url("../../assets/promotionBanner.png") no-repeat center center;
            width: auto;
            height: 224px;
            margin-bottom: 20px;
        }

        .kindlyReminderblock {
            background: #fff;
            font-size: 16px;
            font-weight: 500;
        }

        .kindlyReminderblock h2 {
            margin-left: 20px;
            padding: 20px 0 10px 0;
            font-weight: 500;
        }

        .kindlyReminderblock p {
            margin-left: 20px;
            padding-bottom: 10px;
        }

        .kindlyReminderblock p span {
            color: #ff4d3d;
        }

        .kindlyReminderblock q {
            margin-left: 20px;
            color: #ff4d3d;
        }

        .link {
            width: 480px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            text-indent: 20px;
            background: #d6d6d6;
        }

        .btnCopyLink {
            background: #fd394f;
            width: 120px;
            height: 32px;
            border: 1px solid #fd394f;
            color: #fff;
            border-radius: 5px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
</style>
